zeek34.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box and Text Shadow</title>
<style>
.container {
display: flex;
width: 90vw;
height: 60vh;
justify-content: center;
align-items: center;
margin-top: 20px;
margin-left: 50px;
}
.card {
border: red 2px solid;
width: 500px;
height: 300px;
margin: 15px;
padding: 5px;
background-color: rgb(233, 240, 209);
/* Syntax of {box-shadow:(offset of x_axis) (offset of y_axis) (blur_radius)
(spread_radius) (color);}
Syntax of box shadow inside box{box-shadow:inset (offset of x_axis)
(offset of y_axis) (blur_radius) (spread_radius) (color);}
Syntax of box shadow for multiple box{box-shadow:_______ ,_________} */
box-shadow: 8px 10px 12px green, 15px 17px 6px yellow, inset 2px 3px 5px rgb(0,0,5);
}
h1 {
color: rgb(243, 36, 0);
/* Syntax of {text-shadow:(offset of x_axis) (offset of y_axis) (blur_radius)
(spread_radius) (color); */
text-shadow:4px 4px 10px rgb(238, 81, 54) ;
}
</style>
</head>
<body>
<div class="container">
<div class="card" id="card_1">
<h1>Card-1</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum nobis
corrupti quo tempora excepturi nulla magnam, cupiditate aspernatur,
non mollitia est sequi delectus! Accusantium, deleniti? Repellendus
atque consequatur totam repellat non adipisci nobis culpa aliquid
corporis reiciendis cumque evenieassumenda molestiae, esse placeat
ullam est excepturi ipsa fuga, odio, consequuntur commodi omnis
pariatur provident! Officia sit perspiciatis, odit velit rem labore
non excepturi vero? </p>
</div>
<div class="card" id="card_2">
<h1>Card-2</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum nobis
corrupti quo tempnulla magnam, cupiditate aspernatur, non mollitia est
sequi delectus! Accusantium, deleniti? Repellendus
atque consequatur totam repellat non adipisci nobis culpa aliquid
corporis reiciendis cumque evenie assumenda molestiae, esse placeat
ullam est excepturi ipsa fuga, odio, consequuntur commodi omnis
pariatur provident! Officia sit perspiciatis, odit velit rem labore
non excepturi vero? </p>
</div>
<div class="card" id="card_3">
<h1>Card-3</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum nobis c
orrupti quo tempora excepturi magnam, cupiditate aspernatur, non mollit
ia est sequi delectus! Accusantium, deleniti? Repellendusatque consequa
tur totam repellat non adipisci nobis culpa aliquid corporis reiciend
assumenda molestiae, esse placeat ullam est excepturi ipsa fuga, odio,
consequuntur commodi omnipariatur provident! Officia sit perspiciatis,
odit velit rem labore non excepturi vero? </p>
</div>
</div>
</body>
</html>
Comments
Post a Comment